---
title: ConnectButton
description: Using and customising the ConnectButton
---

# ConnectButton

## Using and customising the ConnectButton

This is the main component. It is responsible for rendering the connect/disconnect button, as well as chain-swapping UI.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

> Note: Make sure your app is wrapped in the necessary providers. [Read more](/docs/installation#wrap-providers).

### Props

The `ConnectButton` component exposes several props to customize its appearance, including toggling the visibility of different elements.

<PropsTable
  data={[
    {
      name: 'label',
      required: false,
      default: 'Connect Wallet',
      type: 'string',
      description: 'The text label displayed on the Connect button',
    },
    {
      name: 'accountStatus',
      required: false,
      default: 'full',
      type: '"avatar" | "address" | "full" | { smallScreen: AccountStatus, largeScreen?: AccountStatus }',
      typeSimple: 'enum',
      description:
        "Whether the active account's avatar and/or address is displayed",
    },
    {
      name: 'chainStatus',
      required: false,
      default: '{ smallScreen: "icon", largeScreen: "full" }',
      type: '"icon" | "name" | "full" | "none" | { smallScreen: ChainStatus, largeScreen?: ChainStatus }',
      typeSimple: 'enum',
      description:
        "Whether the current chain's icon and/or name is displayed, or hidden entirely",
    },
    {
      name: 'showBalance',
      required: false,
      default: '{ smallScreen: false, largeScreen: true }',
      type: 'boolean | { smallScreen: boolean, largeScreen?: boolean }',
      typeSimple: 'enum',
      description:
        'Whether the balance is visible next to the account name',
    },
  ]}
/>

> Note: the built-in `largeScreen` breakpoint is `768px`.

### Examples

#### Label

Use the `label` prop to set a custom `ConnectButton` text.

```tsx
<ConnectButton label="__Sign in__" />
```

#### Account status

Here are a few different ways you can use the `accountStatus` prop.

Only show the account's avatar.

```tsx
<ConnectButton accountStatus="__avatar__" />
```

Only show the account's address.

```tsx
<ConnectButton accountStatus="__address__" />
```

#### Chain status

Here are a few different ways you can use the `chainStatus` prop.

Only show the current chain's icon.

```tsx
<ConnectButton chainStatus="__icon__" />
```

Only show the current chain's name.

```tsx
<ConnectButton chainStatus="__name__" />
```

Hide the chain UI entirely.

```tsx
<ConnectButton chainStatus="__none__" />
```

#### Show balance

Use the `showBalance` prop to hide/show the balance.

Hide the balance.

```tsx
<ConnectButton showBalance={__false__} />
```

#### Responsive

These props can also be defined in a responsive format.

On small screens, only show account icon. But on large screens, show icon and address.

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

On small screens, hide balance. But on large screens, show it.

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```
